// 列表渲染指令
<template>
  <div class="test6">
    <h3>列表渲染指令</h3>
    <div>v-for演示：</div>
    <!-- v-for：官方建议只要用到v-for指令，一定要绑定一个:key属性。key的值类型：字符串或数字类型 -->
    <!-- key的值不能重复，所以一般使用id当作key的值 -->
    <ul>
      <li v-for="item in list" :key="item.id">姓名：{{ item.name }}</li>
    </ul>
    <hr />
  </div>
</template>

<style lang="scss">
.test6 {
  color: black;
  h3 {
    color: red;
  }
  div {
    color: blue;
  }
}
</style>

<script>
export default {
  name: "Test6",
  // data对象是要渲染到页面上的数据
  data() {
    return {
      list: [
        { id: "1", name: "张三" },
        { id: "2", name: "李四" },
        { id: "3", name: "王五" },
      ],
    };
  },
  methods: {},
};
</script>
